<template>
    <div>
        <h1 class="desktop-layout-header">工作台</h1>
        <a-layout>
            <a-layout-content class="desktop-layout-content">
                <a-card>
                    <span slot="title"><a-icon type="notification" /> 最新通知</span>
                    <a-list>
                        <a-list-item>123</a-list-item>
                        <a-list-item>456</a-list-item>
                    </a-list>
                    <span slot="actions" @click="goToNotification">
                    查看更多 <a-icon type="right" />
                    </span>
                </a-card>
                <div style="height: 20px;"></div>
                <a-card>
                    <span slot="title"><a-icon type="ordered-list" /> 事务提醒</span>
                    <a-list>
                        <a-list-item>123</a-list-item>
                        <a-list-item>456</a-list-item>
                    </a-list>
                    <span slot="actions" @click="goToTodo">
                    查看更多 <a-icon type="right" />
                    </span>
                </a-card>
            </a-layout-content>
            <a-layout-sider class="desktop-layout-sider" width="320">
                <a-card>
                    <a-calendar :fullscreen="false" />
                    <a-card size="small" :bordered="false">
                        <a-badge color="red" text="任务" slot="title" />
                        <a-icon type="right" slot="extra" @click="goToTask" />
                        <a-list>
                            <a-list-item>123</a-list-item>
                            <a-list-item>456</a-list-item>
                        </a-list>
                    </a-card>
                    <a-card size="small" :bordered="false">
                        <a-badge color="blue" text="日程安排" slot="title" />
                        <a-icon type="right" slot="extra" @click="goToCalendar" />
                        <a-list>
                            <a-list-item>123</a-list-item>
                            <a-list-item>456</a-list-item>
                        </a-list>
                    </a-card>
                </a-card>
                <div style="height: 20px;"></div>
            </a-layout-sider>
        </a-layout>
    </div>
</template>

<script>
    export default {
        name: "Desktop",
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$emit('route');
            });
        },
        methods: {
            goToNotification() {
                this.$router.push('/main/notification');
            },
            goToTodo() {
                this.$router.push('/main/todo');
            },
            goToTask() {
                this.$router.push('/main/task');
            },
            goToCalendar() {
                this.$router.push('/main/calendar');
            }
        }
    }
</script>

<style scoped>
    .desktop-layout-header {
        background-color: transparent;
    }

    .desktop-layout-sider {
        background-color: transparent;
    }

    .desktop-layout-content {
        margin-right: 20px;
    }
</style>
